<!DOCTYPE html>
<html lang="en-us">
	{% include "common/base.html" %}
	
	<!--

	TABLE OF CONTENTS.
	
	Use search to find needed section.
	
	===================================================================
	
	|  01. #CSS Links                |  all CSS links and file paths  |
	|  02. #FAVICONS                 |  Favicon links and file paths  |
	|  03. #GOOGLE FONT              |  Google font link              |
	|  04. #APP SCREEN / ICONS       |  app icons, screen backdrops   |
	|  05. #BODY                     |  body tag                      |
	|  06. #HEADER                   |  header tag                    |
	|  07. #PROJECTS                 |  project lists                 |
	|  08. #TOGGLE LAYOUT BUTTONS    |  layout buttons and actions    |
	|  09. #MOBILE                   |  mobile view dropdown          |
	|  10. #SEARCH                   |  search field                  |
	|  11. #NAVIGATION               |  left panel & navigation       |
	|  12. #RIGHT PANEL              |  right panel userlist          |
	|  13. #MAIN PANEL               |  main panel                    |
	|  14. #MAIN CONTENT             |  content holder                |
	|  15. #PAGE FOOTER              |  page footer                   |
	|  16. #SHORTCUT AREA            |  dropdown shortcuts area       |
	|  17. #PLUGINS                  |  all scripts and plugins       |
	
	===================================================================
	
	-->
	
	<!-- #BODY -->
	<!-- Possible Classes

		* 'smart-style-{SKIN#}'
		* 'smart-rtl'         - Switch theme mode to RTL
		* 'menu-on-top'       - Switch to top navigation (no DOM change required)
		* 'no-menu'			  - Hides the menu completely
		* 'hidden-menu'       - Hides the main menu but still accessable by hovering over left edge
		* 'fixed-header'      - Fixes the header
		* 'fixed-navigation'  - Fixes the main menu
		* 'fixed-ribbon'      - Fixes breadcrumb
		* 'fixed-page-footer' - Fixes footer
		* 'container'         - boxed layout mode (non-responsive: will not work with fixed-navigation & fixed-ribbon)
	-->
	<body class="">

		{% include "common/common.html" %}

		<!-- MAIN PANEL -->
		<div id="main" role="main">

            {% include "common/topnav.html" %}

			<!-- MAIN CONTENT -->
			<div id="content">

				{% include "common/commoncontent.html" %}

				<!--
				The ID "widget-grid" will start to initialize all widgets below
				You do not need to use widgets if you dont want to. Simply remove
				the <section></section> and you can use wells or panels instead
				-->

				<!-- widget grid -->
				<section id="widget-grid" class="">

					<!-- row -->
					<div class="row">

						<!-- NEW WIDGET START -->
						<article class="col-xs-12 col-sm-12 col-md-12 col-lg-7">

							<!-- Widget ID (each widget will need unique ID)-->
							<div class="jarviswidget" id="wid-id-0" data-widget-colorbutton="false"	data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false">
								<header>
									<h2> Menu Toggle / Collapse / Minify </h2>
									<span class="badge pull-right margin-right-5 margin-top-5">new</span>
								</header>

								<!-- widget div-->
								<div>

									<!-- widget edit box -->
									<div class="jarviswidget-editbox">
										<!-- This area used as dropdown edit box -->
										<input class="form-control" type="text">
									</div>
									<!-- end widget edit box -->

									<!-- widget content -->
									<div class="widget-body no-padding">

										<!-- this is what the user will see -->
										<div class="padding-gutter">
											To toggle minify menu manually add the class <code>
												minified</code>
											to the <b><i>BODY</i></b> element. To collapse the main menu on desktops, add class <code>
												hidden-menu</code>
											to the <b><i>BODY</i></b> element.
											<br>
											<br>

											<span class="btn btn-default" data-action="minifyMenu"> Toggle .minify class </span>
											&nbsp;&nbsp;
											<button class="btn btn-default" data-action="toggleMenu">
												Toggle .collapse class
											</button>

										</div>

										<div class="table-responsive no-margin">

											<table class="table table-bordered">
												<thead>
													<tr>
														<th><b><i>attribute*</i></b></th>
														<th>Description</th>
														<th>Action</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td>
														<code>
															data-action="userLogout"
														</code></td>
														<td>Logout message popup, use it with <code>
															data-logout-msg = "..."</code></td>
														<td><a href="/login" class="btn btn-default btn-xs" data-action="userLogout" data-logout-msg="Your message here..."> action </a></td>
													</tr>
													<tr>
														<td>
														<code>
															data-action="resetWidgets"
														</code></td>
														<td>Resets all localStorage <i>(restores all app settings and widgets)</i></td>
														<td>
														<button class="btn btn-default btn-xs" data-action="resetWidgets">
															action
														</button></td>
													</tr>
													<tr>
														<td>
														<code>
															data-action="launchFullscreen"
														</code></td>
														<td>Launch full screen view <i>(works only in Chrome, Safari, Firefox and Latest IE)</i></td>
														<td>
														<button class="btn btn-default btn-xs" data-action="launchFullscreen">
															action
														</button></td>
													</tr>
													<tr>
														<td>
														<code>
															data-action="minifyMenu"
														</code></td>
														<td>Minify main nav <i>(works only with vertical menu case)</i></td>
														<td>
														<button class="btn btn-default btn-xs" data-action="minifyMenu">
															action
														</button></td>
													</tr>
													<tr>
														<td>
														<code>
															data-action="toggleMenu"
														</code></td>
														<td>Collapse left menu <i>(but still accessable by hovering left edge of screen)</i></td>
														<td>
														<button class="btn btn-default btn-xs" data-action="toggleMenu">
															action
														</button></td>
													</tr>
													<tr>
														<td>
														<code>
															data-action="toggleShortcut"
														</code></td>
														<td>Top slidedown / Metro menu toggle</td>
														<td>
														<button class="btn btn-default btn-xs" data-action="toggleShortcut">
															action
														</button></td>
													</tr>
												</tbody>
											</table>

										</div>

									</div>
									<!-- end widget content -->

								</div>
								<!-- end widget div -->

							</div>
							<!-- end widget -->

							<!-- Widget ID (each widget will need unique ID)-->
							<div class="jarviswidget" id="wid-id-1" data-widget-colorbutton="false"	data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false">
								<header>
									<h2>App Settings</h2>

								</header>

								<!-- widget div-->
								<div>

									<!-- widget edit box -->
									<div class="jarviswidget-editbox">
										<!-- This area used as dropdown edit box -->
										<input class="form-control" type="text">
									</div>
									<!-- end widget edit box -->

									<!-- widget content -->
									<div class="widget-body no-padding">

										<!-- this is what the user will see -->
										<div class="padding-gutter">
											<span class="badge bg-color-green">Note:</span> You can adjust these settings inside <span class="text-primary">app.js</span> file to your comfort.
										</div>

										<div class="table-responsive">

											<table class="table table-bordered margin-top-10">
												<thead>
													<tr>
														<th>Name</th>
														<th>Default/Value</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><b><i>$.throttle_delay</i></b></td>
														<td>
														<code>
															350
														</code></td>
														<td>Impacts the responce rate of some of the responsive elements (lower value affects CPU but improves speed)</td>
													</tr>
													<tr>
														<td><b><i>$.menu_speed</i></b></td>
														<td>
														<code>
															235
														</code></td>
														<td>The rate at which the menu expands revealing child elements on click</td>
													</tr>
													<tr>
														<td><b><i>$.navAsAjax</i></b></td>
														<td>
														<code>
															true/false
														</code></td>
														<td>Your left nav in your app will no longer fire ajax calls, set it to false for HTML version</td>
													</tr>
													<tr>
														<td><b><i>$.enableJarvisWidgets</i></b></td>
														<td>
														<code>
															true/false
														</code></td>
														<td>Please make sure you have included "jarvis.widget.min.js" in your page for this below feature to work</td>
													</tr>
													<tr>
														<td><b><i>$.enableMobileWidgets</i></b></td>
														<td>
														<code>
															true/false
														</code></td>
														<td>Warning: Enabling mobile widgets could potentially crash your webApp if you have too many widgets running at once (<i>must have <b><i>$.enableJarvisWidgets</i></b> to
														<code>true</code></i>)</td>
													</tr>
													<tr>
														<td><b><i>closedSign</i></b></td>
														<td>
														<code>
															fa-plus-square-o
														</code></td>
														<td>Menu open icon</td>
													</tr>
													<tr>
														<td><b><i>openedSign</i></b></td>
														<td>
														<code>
															fa-minus-square-o
														</code></td>
														<td>Menu close icon</td>
													</tr>
													<tr>
														<td><b><i>setup_widgets_desktop()</i></b></td>
														<td><i>function<b>()</b></i></td>
														<td>Setup widgets for desktop (<i>must have <b><i>$.enableJarvisWidgets</i></b> to
														<code>
															true
														</code></i>) </td>
													</tr>
													<tr>
														<td><b><i>setup_widgets_mobile()</i></b></td>
														<td><i>function<b>()</b></i></td>
														<td>Setup widgets for desktop <i>(must have <b>$.enableJarvisWidgets</b> and <b>$.enableMobileWidgets</b> to <code>true</code>)</i></td>
													</tr>
													<tr>
														<td><b><i>runAllCharts()</i></b></td>
														<td><i>function<b>()</b></i></td>
														<td>Runs all inline charts including: $.sparkline and $.easyPieChart</td>
													</tr>
													<tr>
														<td><b><i>runAllForms()</i></b></td>
														<td><i>function<b>()</b></i></td>
														<td>Runs all form related scripts such as $.select2, $.mask, $.datepicker and $.autocomplete</td>
													</tr>
													<tr>
														<td><b><i>pageSetUp()</i></b></td>
														<td><i>function<b>()</b></i></td>
														<td>Runs the following functions all at once: <i>setup_widgets_desktop<b>()</b>, setup_widgets_mobile<b>()</b>, runAllCharts<b>()</b>, runAllForms<b>()</b></i> - and also activates all tooltip and popovers</td>
													</tr>
												</tbody>
											</table>

										</div>
									</div>
									<!-- end widget content -->

								</div>
								<!-- end widget div -->

							</div>
							<!-- end widget -->

						</article>
						<!-- WIDGET END -->

						<article class="col-xs-12 col-sm-12 col-md-12 col-lg-5">

							<!-- Widget ID (each widget will need unique ID)-->
							<div class="jarviswidget" id="wid-id-2" data-widget-colorbutton="false"	data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false">
								<header>
									<h2> Page layout options </h2>
								</header>

								<!-- widget div-->
								<div>

									<!-- widget edit box -->
									<div class="jarviswidget-editbox">
										<!-- This area used as dropdown edit box -->
										<input class="form-control" type="text">
									</div>
									<!-- end widget edit box -->

									<!-- widget content -->
									<div class="widget-body no-padding">

										<div class="padding-gutter padding-bottom-0">
											Possible classes for the <b><i>BODY</i></b> tag: <code>
												smart-skin-{SKIN_NUMBER}</code>
											, <code>
												smart-rtl</code>
											, <code>
												fixed-header</code>
											, <code>
												fixed-navigation</code>
											, <code>
												fixed-ribbon</code>
											, <code>
												fixed-footer</code>
											, <code>
												container</code>

										</div>

										<!-- this is what the user will see -->
										<div class="padding-gutter">
											<div style="background: #f1f1f1;border-radius:3px;overflow: hidden">
												<div style="width: 100%;height: auto;background:#ddd;font-size:11px;font-weight: bold;padding:13px 10px">
													<img src="/static/img/logo.png" alt="SmartAdmin" style="width:75px;">
												</div>
												<div style="width: 25%;height: 296px; background:#949291;" class="pull-left"></div>
												<div style="width: 75%;height: 255px; background:#f1f1f1;" class="pull-left">
													<div style="width: 100% height:20px; padding:3px; background:#C5C5C5; font-size:10px; font-weight: bold;">
														<i class="fa fa-home"></i> breadcrumb &gt;
													</div>
												</div>
												<div style="width: 75%;height: auto;background:#ddd;font-size:11px;font-weight: bold;padding:13px 10px" class="text-right pull-right">
													Footer
												</div>
											</div>
										</div>

										<hr>

										<div class="padding-gutter padding-top-0 padding-bottom-0">
											Switch to top menu by adding class <code>
												.menu-on-top</code>
										</div>

										<div class="padding-gutter">

											<div style="background: #f1f1f1;border-radius:3px;overflow: hidden">
												<div style="width: 100%;height: auto;background:#ddd;font-size:11px;font-weight: bold;padding:13px 10px">
													<img src="/static/img/logo.png" alt="SmartAdmin" style="width:75px;">
												</div>
												<div style="width: 100%;height: 50px; background:#949291;" class="pull-left"></div>
												<div style="width: 100%;height: 255px; background:#f1f1f1;" class="pull-left">
													<div style="width: 100%; height:20px; padding:3px; background:#C5C5C5; font-size:10px; font-weight: bold;">
														<i class="fa fa-home"></i> breadcrumb >
													</div>
												</div>
												<div style="width: 100%;height: auto;background:#ddd;font-size:11px;font-weight: bold;padding:13px 10px" class="text-right pull-right">
													Footer
												</div>
											</div>

										</div>

									</div>
									<!-- end widget content -->

								</div>
								<!-- end widget div -->

							</div>
							<!-- end widget -->

						</article>

					</div>

					<!-- end row -->

					<!-- row -->

					<div class="row">

						<!-- a blank row to get started -->
						<div class="col-sm-12">
							<!-- your contents here -->
						</div>

					</div>

					<!-- end row -->

				</section>
				<!-- end widget grid -->

			</div>
			<!-- END MAIN CONTENT -->

		</div>
		<!-- END MAIN PANEL -->


		<!--================================================== -->

		<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)-->
		<script data-pace-options='{ "restartOnRequestAfter": true }' src="/static/js/plugin/pace/pace.min.js"></script>

		<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
		{% include "common/basejs.html" %}

		<!-- IMPORTANT: APP CONFIG -->
		<script src="/static/js/app.config.js"></script>

		<!-- JS TOUCH : include this plugin for mobile drag / drop touch events-->
		<script src="/static/js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script>

		<!-- BOOTSTRAP JS -->
		<script src="/static/js/bootstrap/bootstrap.min.js"></script>

		<!-- CUSTOM NOTIFICATION -->
		<script src="/static/js/notification/SmartNotification.min.js"></script>

		<!-- JARVIS WIDGETS -->
		<script src="/static/js/smartwidgets/jarvis.widget.min.js"></script>

		<!-- EASY PIE CHARTS -->
		<script src="/static/js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>

		<!-- SPARKLINES -->
		<script src="/static/js/plugin/sparkline/jquery.sparkline.min.js"></script>

		<!-- JQUERY VALIDATE -->
		<script src="/static/js/plugin/jquery-validate/jquery.validate.min.js"></script>

		<!-- JQUERY MASKED INPUT -->
		<script src="/static/js/plugin/masked-input/jquery.maskedinput.min.js"></script>

		<!-- JQUERY SELECT2 INPUT -->
		<script src="/static/js/plugin/select2/select2.min.js"></script>

		<!-- JQUERY UI + Bootstrap Slider -->
		<script src="/static/js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

		<!-- browser msie issue fix -->
		<script src="/static/js/plugin/msie-fix/jquery.mb.browser.min.js"></script>

		<!-- FastClick: For mobile devices -->
		<script src="/static/js/plugin/fastclick/fastclick.min.js"></script>

		<!--[if IE 8]>

		<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>

		<![endif]-->

		<!-- Demo purpose only -->
		{% include "common/javascript.html" %}

		<!-- MAIN APP JS FILE -->
		<script src="/static/js/app.min.js"></script>

		<!-- ENHANCEMENT PLUGINS : NOT A REQUIREMENT -->
		<!-- Voice command : plugin -->
		<script src="/static/js/speech/voicecommand.min.js"></script>

		<!-- SmartChat UI : plugin -->
		<script src="/static/js/smart-chat-ui/smart.chat.ui.min.js"></script>
		<script src="/static/js/smart-chat-ui/smart.chat.manager.min.js"></script>

		<!-- PAGE RELATED PLUGIN(S) 
		<script src="..."></script>-->

		<script type="text/javascript">

			$(document).ready(function() {
			 	
				/* DO NOT REMOVE : GLOBAL FUNCTIONS!
				 *
				 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
				 *
				 * // activate tooltips
				 * $("[rel=tooltip]").tooltip();
				 *
				 * // activate popovers
				 * $("[rel=popover]").popover();
				 *
				 * // activate popovers with hover states
				 * $("[rel=popover-hover]").popover({ trigger: "hover" });
				 *
				 * // activate inline charts
				 * runAllCharts();
				 *
				 * // setup widgets
				 * setup_widgets_desktop();
				 *
				 * // run form elements
				 * runAllForms();
				 *
				 ********************************
				 *
				 * pageSetUp() is needed whenever you load a page.
				 * It initializes and checks for all basic elements of the page
				 * and makes rendering easier.
				 *
				 */
				
				 pageSetUp();
				 
				/*
				 * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
				 * eg alert("my home function");
				 * 
				 * var pagefunction = function() {
				 *   ...
				 * }
				 * loadScript("js/plugin/_PLUGIN_NAME_.js", pagefunction);
				 * 
				 * TO LOAD A SCRIPT:
				 * var pagefunction = function (){ 
				 *  loadScript(".../plugin.js", run_after_loaded);	
				 * }
				 * 
				 * OR
				 * 
				 * loadScript(".../plugin.js", run_after_loaded);
				 */
				
			})
		
		</script>

		<!-- Your GOOGLE ANALYTICS CODE Below -->
		<script type="text/javascript">
			var _gaq = _gaq || [];
				_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
				_gaq.push(['_trackPageview']);
			
			(function() {
				var ga = document.createElement('script');
				ga.type = 'text/javascript';
				ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(ga, s);
			})();

		</script>

	</body>

</html>